
body.light {
    @import './element-variables';
  
    // background: $--content-background-color;
    // color: $--color-text-regular;
    .c-danger {
        color: $--color-danger
    }
  
    .c-primary {
        color: $--color-primary;
    }
  
    .content-box {
        background-color: $--contentBox-background-color;//#f0f0f0;
    }
    .header {
        background: $--white-color;
        border-bottom: 1px solid #d8e3ef;
    }
    .collapse-btn{
        // box-shadow: -5px 0 6px 6px rgba(0, 0, 0, 0.5);
    }
    .collapse-btn .logo-text{
        color: $--black-color;
    }
    .collapLogo,.isCollapseNo .logo{
        color: #7f7f7f;
    }
  
  
    .pLabel {
        border-left: 3px solid $--color-primary;
        color: $--color-primary;
    }
  
  
    .crumbs {
        background: $--content-background-color;
        border-bottom: 1px solid $--border-color-base;
    }
  
    .rightPanel {
        border-right: 4px solid $--color-primary;
        background: $--color-info;
        color: $--content-background-color;
    
        .handle-button {
            background: $--color-primary;
            color: $--content-background-color;
        }
    
        .el-radio {
            color: $--color-text-placeholder
        }
    }
  
  
    // /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    // ::-webkit-scrollbar {
    //     width: 0px;
    //     height: 10px;
    //     background-color: rgba(0, 0, 0, 0);
    //     border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
    // }
  
    // /*定义滚动条轨道 内阴影+圆角*/
    // ::-webkit-scrollbar-track {
    //     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    //     border-radius: 5px;
    //     background-color: rgba(0, 0, 0, 0);
    // }
  
    // /*定义滑块 内阴影+圆角*/
    // ::-webkit-scrollbar-thumb {
    //     border-radius: 5px;
    //     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
    //     background-color: $--border-color-base;
    // }
    // // .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{
    // //   width: 5px;
    // //   height: 5px;
    // //   background-color: rgba(0, 0, 0, 0);
    // //   border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
    // // }
  
    /*修改框架本身的样式
    ----------------------------------------------------------------------------------*/
    /*Menu   start*/
    .el-menu {
        background: $--menu-background-color;
    }
    .c-menu-group__title{
        background: #00000066;
    }
    .c-menu-group__title::after{
        background: #E7E7E7;
    }
    .sidebar-el-menu{
        // box-shadow: 10px 0px 6px 0px rgba(170, 170, 170, 0.5);
    }
  
    .el-menu-item {
        color: $--menu-item-font-color;
    }
    .el-menu-item.is-active,.el-menu-item:focus,.el-dropdown-menu__item:focus {
        background: $--menu-item-active-background;
    }
  
    .el-menu-item i {
        color: inherit;
    }
  
    .el-submenu__title {
        color:  $--color-text-placeholder;
    }
  
    .el-submenu__title i {
        color: inherit;
        vertical-align: middle;
    }
  
    .el-submenu__title,.el-sub-menu__title {
        color:  $--menu-item-font-color !important;
    }
  
    .el-submenu__title i,.el-sub-menu__title i {
        color: inherit;
        vertical-align: middle;
    }
  
    .el-submenu__title:not(.is-active):hover,.el-menu-item:not(.is-active):hover 
    .el-sub-menu__title:not(.is-active):hover,.el-sub-menu-item:not(.is-active):hover{
        // background-color:  $--color-bg-hover;
        background: $--menu-item-hover-fill;
        // background: rgba(238, 238, 238, 1);   
    }
    /*Menu   end*/
  
    /*button*/
    .el-button + .el-button {
        margin-left: 10px;
    }
  
    /*card*/
    .el-card {
        height: 100%;
    }
  
    .el-card__header {
        height: 50px;
        line-height: 50px;
        padding: 0 15px;
        background: $--content-background-color;
    }
    .crm-theme-switch span.moon:hover{
        color: #636262;
    }
    /* el-switch */
    .el-switch{
        margin-top: 10px;
    }
    .el-switch__label *{
        font-size: 18px;
    }
    .el-switch__label.is-active{
        color: #ffe500;
    }
  
  
    /*Checkbox,radio*/
    .el-range-input, .el-checkbox__inner, .el-radio__inner {
        background-color: $--background-color-base;
        border-color: $--border-color-base;
    }
  
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-radio__input.is-checked .el-radio__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        border-color: $--color-primary;
        background-color: $--color-primary;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label, .el-radio__input.is-checked + .el-radio__label {
        color: $--color-primary;
    }
    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
        color: $--color-text-placeholder;
        background: $--border-color-extra-light;
        border-color: $--border-color-extra-light;
    }
    .el-checkbox__input.is-disabled + span.el-checkbox__label{
        color: $--color-text-placeholder;
    }
    .el-checkbox {
        margin-right: 0px;
    }
    .list-setting-con .el-checkbox{
        display: flex;
    }
    /* custom theme */
    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        border-color: $--color-primary;
        background-color: $--color-primary;
        color: $--content-background-color;
    }
    .el-radio-button__inner:hover{
        background: $--table-active-cell-background;
        color: inherit;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner{
        border-color: $--color-primary;
    }
    .blueName{
        color: $--color-primary;
    }
    .el-dialog__close:hover{
        color: $--color-primary;
    }
    .el-dropdown-menu__item:hover{
        background-color: $--table-active-cell-background;
        color: $--color-primary;
    }
    .el-input-number__decrease:hover,.el-input-number__increase:hover{
        color: $--color-primary !important;
    }
    .el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), 
    .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
        border-color: $--color-primary !important;
    }

   
  
    /* Table*/
    .el-table, .el-table tr {
        background-color: $--background-color-base;
        // background-color: $--border-color-extra-light-hover;
    }
    .el-table tr:hover{
        background-color: $--border-color-extra-light;
        // background-color: $--border-color-extra-light-hover;
    }
    .el-table-filter__bottom button:hover{
        color: $--color-primary-hover;
    }
    .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: $--border-color-extra-light-hover !important;
    }
    .el-table {
        /*  border-width: 2px;
            border-image: -webkit-linear-gradient(left, $--border-color-base 0%, #fff 50%, $--border-color-base 100%) 2 2;
            box-shadow: 0 0 2px 2px rgba(76, 119, 169, 0.7);
            background: rgba(1, 8, 27, 0.4);*/  
        [class*=el-table__row--level] .el-table__expand-icon{
            // margin-left: -40px;
            // margin-right: 8px;
        }
        .el-table__row .cell span{
            // margin-left: 16px;
        }
    }
    .el-table__body tr.hover-row > td.el-table__cell, 
    .el-table__body tr.hover-row.current-row > td.el-table__cell, 
    .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell, 
    .el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell{
        background-color: $--border-color-extra-light-hover;
    }
    .el-table td {
        border: none;
        padding: 5px 0;
    }
  
    .el-table th {
        padding: 5px 0;
        background-color: $--background-color-base;
    }
    .el-table__body tr.current-row>td.el-table__cell{
        background-color: $--table-active-cell-background;
    }
  
    /*pagination*/
    .pagination {
        text-align: right;
    
        .el-pagination__total {
            float: left;
        }
        button:hover{
            color: $--color-primary-hover;
        }
    }
    .el-table-filter__checkbox-group{
        display: flex;
        flex-direction: column;
    }
  
    .el-pagination.is-background .el-pager li {
        background-color: $--color-info;
    }
    .el-pager li.active{
        color: $--color-primary;
    }
    .el-pager li:hover{
        color: $--color-primary-hover;
    }
    .el-pagination.is-background .btn-prev:not(:disabled), .el-pagination.is-background .btn-next:not(:disabled) {
        background-color: $--color-info;
    }
  
    .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .btn-next:disabled {
        color: $--content-background-color;
        background-color: $--color-text-placeholder;
    }
  
    .el-pagination__jump, .el-pagination__total {
        color: $--content-font-color;
    }
  
    .el-pagination__jump .el-input {
        width: 50px;
    }
  
    /*tree*/
    .el-tree {
        background-color: $--background-color-base;
    }
  
    .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        background-color: $--border-color-extra-light;
    }
    .el-tree .el-tree-node.is-current> .el-tree-node__content{
        color: $--color-primary;
        background: none;
    }
    .el-tree .el-tree-node__content {
        background-color: $--background-color-base;
    }
    .el-tree .el-tree-node> .el-tree-node__content:hover {
        background-color: $--border-color-extra-light;
    }
    .el-tree-node__content>label.el-checkbox{
        margin-right: 8px;
    }
  
    /*dialog*/
    .el-dialog {
        background: $--background-color-show;
        // border: 2px solid;
        // border-image: -webkit-linear-gradient(left, #869bbb 0%, #fff 50%, #869bbb 100%) 30 30;
    }
  
    .el-dialog__title {
        color: $--content-font-color
    }
  
    .el-dialog__header {
        //border-bottom:1px solid #869bbb;
    }
  
    /*button*/
    .el-button.is-plain {
        background: $--background-color-base;
        border-color: inherit;
    
        &:hover, &:active, &:focus {
            background: $--background-color-base;
            color: inherit;
        }
    }
  
    .el-button + .el-button {
        margin-left: 10px;
    }
    .mailGroup .el-input-group__append{
        background-color: #f5f7fa;
        color: #909399;
    }
    .mailGroup .el-input-group__append button.el-button{
        border-color: transparent !important;
        background-color: transparent !important;
        color: inherit !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        display: inline-block !important;
        margin: -10px -20px !important;
    }
  
    /*upload*/
    .el-upload-dragger {
        background: $--background-color-base;
        border-color: $--color-info;
    }
  
    .el-upload-dragger{
        width: 100%;
    }
  
    /*loading*/
    .el-loading-mask {
        background: rgba(0, 0, 0, 0.3);
    }
  
    /*crumb*/
    .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
        font-weight: normal;
        color: $--content-font-color;
        cursor: text;
    }
  
    .el-breadcrumb__inner.is-link {
        color: $--content-font-color;
    }
  
    .el-breadcrumb__inner.is-link:hover {
        color: $--color-primary;
    }
  
    /*input*/
    :not(:is-disabled) .el-input__inner {
        background: $--background-color-base;
        color: $--content-font-color;
        border-color: $--border-color-base;
    }  
    .el-input-group__prepend {
        padding: 0;
    }
  
    /*select*/
    .el-select-dropdown__item {
        color: $--content-font-color;
    }
  
    .el-select-dropdown__item.selected {
        color: $--color-primary;
    }
  
    .el-select-dropdown__item.hover{
        background-color: $--border-color-extra-light;
    } 
    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected .checkbox{
        background-color: $--color-primary;
        border-color: $--color-primary;
    }
    // [class^="el-icon-"],[class*=" el-icon-"]{
    //   font-family: lx-iconfont!important;
    // }
    /* sidebar */
    .sidebar .menu-title{
        color: #7f7f7f;
    }  
    /*header Tags     start
    ----------------------------*/
    .tags-li{
        border: 1px solid rgba(242, 242, 242, 1);
        background: $--header-tags-li-background;
        box-shadow: 1px 1px 5px rgba(127, 127, 127,.16);
        color: $--header-tags-li-color;
    }
    .tags-li .el-radio-button__inner{
        box-shadow: inherit;
    }
    .tags-li.is-active .el-radio-button__inner,.tags-li:checked .el-radio-button__inner{
        color: $--header-tags-li-active-color;
        background: $--header-tags-li-active-background;
    }

 
    
    .tags-li:not(.active):hover,.tags-li:not(.is-checked):hover {
        background: $--header-tags-li-hover-background;
        color: $--header-tags-li-title-active-color;
    }
    
    .tags-li.active,.tags-li.is-checked{
        color: $--header-tags-li-active-color;
        background: $--header-tags-li-active-background;
    }
    .tags-li.active .squire,.tags-li.is-checked .squire,.tags-li.is-active .el-radio-button__inner .squire{
        background: $--header-tags-li-active-color;
    }
    
    .tags-li-title{
        color: $--header-tags-li-title-color;
    }
    
    .tags-li.active .tags-li-title,.tags-li.is-checked .tags-li-title,.tags-li.is-active .el-radio-button__inner .tags-li-title {
        color: $--header-tags-li-title-active-color;
    }
    /*header Tags     end*/
}